// 引入 wangEditor
import E from "wangeditor"; // npm 安装
// const E = window.wangEditor // CDN 引入的方式

// 获取必要的变量，这些在下文中都会用到
const { $, DropListMenu } = E;

// 第一，菜单 class ，Button 菜单继承 BtnMenu class
class AlertMenu extends DropListMenu {
  constructor(editor: E) {
    // 菜单栏中，标题菜单的 DOM 元素
    // 注意，这里的 $ 不是 jQuery ，是 E.$ （wangEditor 自带的 DOM 操作工具，类似于 jQuery）
    // data-title属性表示当鼠标悬停在该按钮上时提示该按钮的功能简述
    const $elem = $('<div class="w-e-menu" data-title="@"><i>@</i></div>');
    const list: any = [
      { $elem: $("<p>张三</p>"), value: "@张三" },
      { $elem: $("<p>李四</p>"), value: "@李四" },
      { $elem: $("<p>王二</p>"), value: "@王二" },
      { $elem: $("<p>好久</p>"), value: "@好久" },
      { $elem: $("<p>说三道四的</p>"), value: "@说三道四的" }
    ];
    // droplist 配置
    const dropListConf = {
      width: 200,
      title: "",
      type: "list",
      list: list,
      // droplist 每个 item 的点击事件
      clickHandler: (value: any) => {
        // value 参数即 dropListConf.list 中配置的 value
        this.command(value);
      }
    };

    super($elem, editor, dropListConf);
  }

  command(value: any) {
    // 设置标题
    this.editor.cmd.do("insertHTML", `<i>${value}</i>`);
  }

  // 菜单是否需要激活
  tryChangeActive() {
    //   const reg = /^h/i;
    //   const cmdValue = this.editor.cmd.queryCommandValue("formatBlock");
    //   if (reg.test(cmdValue)) {
    //     // 选区处于标题内，激活菜单
    //     this.active();
    //   } else {
    //     // 否则，取消激活
    //     this.unActive();
    //   }
  }
}
export default AlertMenu;
